import React from 'react';
import { Form as AntdForm, Input, Checkbox, Button, Select, Radio, Space } from 'antd'
import { Form, Field } from 'react-final-form'
import { FormExampleContainer } from '../../components'
import './simple.css';

export const Simple = () => {
    const onSubmit = (value: any) => {
        setTimeout(() => {
            alert(JSON.stringify(value, null, 2))
        }, 500)
    }

    const options = [
        { label: 'Ketchup', value: 'Ketchup' },
        { label: 'Mustard', value: 'Mustard' },
        { label: 'Mayonnaise', value: 'Mayonnaise' },
        { label: 'Guacamole🥑', value: 'Guacamole' },
    ];
    return (
        <>
            <FormExampleContainer title={'Simple'} description={'An example of a simple form created with React Final Form'}>
                <Form onSubmit={onSubmit}>
                    {
                        ({ handleSubmit, values }) => (
                            <AntdForm
                                labelCol={{ span: 4, offset: 2 }}
                                wrapperCol={{ span: 9, offset: 1 }}
                                onFinish={handleSubmit}
                            >
                                <AntdForm.Item label="First Name:">
                                    <Field name='firstName'>
                                        {
                                            ({ input: { onChange } }) => <Input onChange={onChange} placeholder="First Name" />
                                        }
                                    </Field>
                                </AntdForm.Item>
                                <AntdForm.Item label="Last Name:">
                                    <Field name='lastName'>
                                        {
                                            ({ input: { onChange } }) => <Input placeholder='Last Name' onChange={onChange} />
                                        }
                                    </Field>
                                </AntdForm.Item>
                                <AntdForm.Item label="Employed:">
                                    <Field name='isEmployed' type='checkbox'>
                                        {
                                            ({ input: { onChange } }) => <Checkbox onChange={onChange} />

                                        }
                                    </Field>
                                </AntdForm.Item>
                                <AntdForm.Item label="Favorite Color">
                                    <Field name='favoriteColor'>
                                        {
                                            ({ input: { onChange } }) =>
                                                <Select onChange={onChange}>
                                                    <Select.Option value="#ff0000">❤️ RED</Select.Option>
                                                    <Select.Option value="#00ff00">💚 Green</Select.Option>
                                                    <Select.Option value="#0000ff">💙 Blue</Select.Option>
                                                </Select>
                                        }
                                    </Field>
                                </AntdForm.Item>
                                <AntdForm.Item label="Sauces:">
                                    <Field name='sauces'>
                                        {
                                            ({ input: { onChange } }) =>
                                                <Checkbox.Group
                                                    onChange={onChange}
                                                    options={options}
                                                />
                                        }
                                    </Field>
                                </AntdForm.Item>
                                <AntdForm.Item label="Best Stooge:">
                                    <Radio.Group >
                                        <Space direction="vertical">
                                            <Field name='stooge' type="radio">
                                                {
                                                    ({ input: { onChange } }) => <Radio value='larry' onChange={onChange}>Larry</Radio>
                                                }
                                            </Field>
                                            <Field name='stooge' type="radio">
                                                {
                                                    ({ input: { onChange } }) => <Radio value='moe' onChange={onChange}>Moe</Radio>
                                                }
                                            </Field>
                                            <Field name='stooge' type="radio">
                                                {
                                                    ({ input: { onChange } }) => <Radio value='curly' onChange={onChange}>Curly</Radio>
                                                }
                                            </Field>
                                        </Space>
                                    </Radio.Group>
                                </AntdForm.Item>
                                <AntdForm.Item label="Best Stooge:">
                                    <Field name='notes'>
                                        {({ input: { onChange } }) => <Input.TextArea onChange={onChange} />}
                                    </Field>
                                </AntdForm.Item>
                                <AntdForm.Item wrapperCol={{ span: 12, offset: 6 }}>
                                    <Button type='primary' htmlType="submit">Submit</Button>
                                </AntdForm.Item>
                                <Input.TextArea disabled value={JSON.stringify(values, null, 2)} rows={4} />
                            </AntdForm>
                        )
                    }
                </Form>
            </FormExampleContainer>
        </>

    )
};
